<template>
    <Head>
        <Title>友情链接</Title>
    </Head>
    <div class="index-navs">
        <NuxtLink to="/">首页</NuxtLink>
        <i class="ri-arrow-right-s-line" />
        <NuxtLink to="/links">友情链接</NuxtLink>
    </div>
    <AppLoading :pending="pending" :total="total === 0">
        <div class="app-links">
            <Table :data="options">
                <template #icon="item">
                    <NuxtLink :to="item.scope.row.url" target="_blank" @click="look(item.scope.row)">
                        <Avatar shape="square" :size="32" :src="item.scope.row.icon" />
                    </NuxtLink>
                </template>
                <template #name="item">
                    <NuxtLink :to="item.scope.row.url" target="_blank" @click="look(item.scope.row)">
                        <span>{{ item.scope.row.name }}</span>
                    </NuxtLink>
                </template>
            </Table>
            <Button class="apply" @click="handleOpen">申请友情链接</Button>
            <!-- 分页 -->
            <div v-if="total > pageSize" class="app-pages">
                <Page :total="total" :page-size="pageSize" :page-num="pageNum" />
            </div>
        </div>
    </AppLoading>
    <!-- 友链申请 -->
    <Modal v-model="state.modal" footer header title="友情链接申请" :mask-close="false" @ok="handleApply">
        <Space full-width direction="vertical">
            <div class="link-alert">
                <p>申请前请贵站做好本站链接</p>
                <p>名称: 悠悠博客</p>
                <p>简介: 拥有50+年前端设计经验的保洁阿姨</p>
                <p>链接: https://www.usuuu.com</p>
                <p>图标: https://www.usuuu.com/favicon.ico</p>
            </div>
            <Input v-model="link.name" placeholder="友链名称" />
            <Input v-model="link.url" placeholder="友链地址" />
            <Input v-model="link.qq" placeholder="站长QQ" />
            <Input v-model="link.email" placeholder="站长Email" />
            <Input v-model="link.icon" placeholder="友链图标" />
            <Input v-model="link.description" textarea placeholder="友链简介" />
        </Space>
    </Modal>
</template>
<script setup lang="ts">
import '@less/links.less'
import { Toast, isNull } from 'usuuu'

/**
 * 响应式数据
 */
const state = reactive({
    //模态框
    modal: false
})
/**
 * 友链列表
 */
const { list, pending, total, pageNum, pageSize } = await linkApi(states().pageNum)
const options = ref({
    column: [
        { prop: 'icon', title: '图标' },
        { prop: 'name', title: '网站名称' },
        { prop: 'description', title: '网站简介' },
        { prop: 'looks', title: '访问' }
    ],
    data: list
})
/**
 * 增加友链访问量
 * 
 * @param item 友情链接Vo
 */
const look = async (item: LinksVo) => {
    const data = await lookLinkApi(item.id)
    if (data.code == 200) {
        item.looks++
    }
}
/**
 * 打开模态框
 */
const handleOpen = () => {
    if (validateUser()) {
        state.modal = true
    }
}
/**
 * 申请友链定义
 */
const link = reactive({
    qq: '',
    url: '',
    icon: '',
    name: '',
    email: '',
    description: ''
})
/**
 * 申请友链
 */
const handleApply = async () => {
    if (validateUser()) {
        if (isNull(link.url) || isNull(link.name)) {
            Toast.open('地址和名称必填')
            return
        }
        const data = await linkApplyApi(link)
        if (data.code == 200) {
            state.modal = false
            link.qq = ''
            link.url = ''
            link.icon = ''
            link.name = ''
            link.email = ''
            link.description = ''
        }
        Toast.open(data.msg)
    }
}
</script>